<template>
    <div class="w-full flex flex-col items-center justify-between mt-16">
        <div class="grid gap-y-6">
            <div v-if="diyTopic?.isEnable" class="website-topic">
                <el-image
                    v-if="diyTopic?.logo"
                    :src="diyTopic?.logo"
                    class="w-[58px] h-[58px]"
                />
                <div class="grid gap-1.5">
                    <h2 class="text-5xl font-bold leading-tight">{{ diyTopic?.title }}</h2>
                    <p class="text-tx-regular">{{ diyTopic?.intro }}</p>
                </div>
            </div>

            <div v-if="diyQuick.length > 0" class="help-example">
                <template v-for="(item, index) in diyQuick">
                    <!-- 链接 -->
                    <div v-if="item?.layout === 'link'" :key="index" class="panel-card-link">
                        <h6 class="text-2xl font-bold">{{ item.name }}</h6>
                        <p v-if="item?.intro" class="mt-2 text-xs text-tx-placeholder">
                            {{ item.intro }}
                        </p>
                        <div class="mt-1.5">
                            <nuxt-link
                                v-for="(d, i) in item?.lists"
                                :key="i"
                                class="link-item"
                                @click="emits('jump', item.click, item.layout, d)"
                            >
                                <em>{{ i+1 }}</em>
                                <span class="text-xl text-tx-regular">{{ d.name }}</span>
                            </nuxt-link>
                        </div>
                    </div>
                    <!-- 条状 -->
                    <div v-if="item?.layout === 'twig'" :key="index" class="panel-card-twig">
                        <h6 class="text-2xl font-bold">{{ item.name }}</h6>
                        <p v-if="item?.intro" class="mt-1.5 text-xs text-tx-placeholder">{{ item.intro }}</p>
                        <div class="mt-5">
                            <nuxt-link
                                v-for="(d, i) in item?.lists"
                                :key="i"
                                class="twig-item"
                                @click="emits('jump', item.click, item.layout, d)"
                            >
                                <el-image
                                    v-if="d?.logo"
                                    :src="d?.logo"
                                    class="w-[20px] h-[20px]"
                                />
                                <em v-if="d?.name">{{ d.name }}</em>
                                <span v-if="d?.intro">{{ d.intro }}</span>
                            </nuxt-link>
                        </div>
                    </div>
                    <!-- 应用 -->
                    <div v-if="item?.layout === 'apply'" :key="index" class="panel-card-apply">
                        <div v-for="(d, i) in item?.lists" :key="i" class="apply-item">
                            <div>
                                <h6 v-if="d?.name" class="text-2xl font-bold">{{ d.name }}</h6>
                                <p v-if="d?.intro" class="mt-2 text-xs text-tx-placeholder">{{ d.intro }}</p>
                            </div>
                            <nuxt-link
                                v-if="d?.button"
                                class="button"
                                @click="emits('jump', item.click, item.layout, d)"
                            >
                                {{ d.button }}
                            </nuxt-link>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div class="w-[980px] mt-4 mb-6">
            <chatting-input-box
                ref="chatActionRef"
                :maxUploadNum="robotDetail?.max_upload_num"
                :isUploadFiles="robotDetail?.is_upload_files"
                :isUploadImage="robotDetail?.is_upload_image"
                :isWebSearch="robotDetail?.is_web_search"
                @search="(e: boolean) => emits('search', e)"
                @sending="emits('sending')"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { diyEnum } from '~/enums/app'
import useAppStore from '~/stores/app'

const emits = defineEmits(['sending', 'search', 'jump'])
withDefaults(
    defineProps<{
        robotDetail: ChatRoomingInitResponse
    }>(),
    {}
)

const appStore = useAppStore()

// 装修数据
const diyData = await appStore.getDiy(diyEnum.DESK)
const diyTopic = diyData.boards.topic || {} as AppDiyBoardsTopic
const diyQuick = diyData.boards.quick || [] as AppDiyBoardsQuick[]
</script>

<style scoped lang="scss">
.website-topic {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    border: 1px dashed transparent;
    border-radius: 4px;
}

.help-example {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 15px;
    .panel-card-twig {
        box-sizing: border-box;
        width: 330px;
        padding: 16px;
        cursor: pointer;
        background: linear-gradient(to right, #e3e7ff, #f5f0fc, #f5f0ff);
        border: 1px dashed transparent;
        border-radius: 12px;
        .twig-item {
            display: flex;
            gap: 10px;
            align-items: center;
            height: 50px;
            padding: 0 15px;
            margin-bottom: 14px;
            background: rgb(255 255 255 / 60%);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
            em {
                font-size: 15px;
                font-style: normal;
                font-weight: bold;
            }
            span {
                color: var(--el-text-color-placeholder);
            }
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                cursor: pointer;
                background: rgb(255 255 255 / 40%);
            }
        }
    }

    .panel-card-link {
        width: 330px;
        padding: 16px 16px 10px;
        cursor: pointer;
        background: linear-gradient(to right, #eaf5ff, #edeffe, #f1ebff);
        border: 1px dashed transparent;
        border-radius: 12px;
        .link-item {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 13px 0;
            cursor: pointer;
            em {
                font-size: 16px;
                font-style: normal;
                font-weight: bold;
                color: var(--el-text-color-secondary);
            }
            &:nth-child(1) em {
                color: #f14b5b;
            }
            &:nth-child(2) em {
                color: #ee7073;
            }
            &:nth-child(3) em {
                color: #f8a253;
            }
            &:hover {
                cursor: pointer;
                opacity: .8;
            }
        }
    }

    .panel-card-apply {
        display: grid;
        gap: 15px;
        cursor: pointer;
        border: 1px dashed transparent;
        border-radius: 12px;
        .apply-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 310px;
            padding: 16px;
            background: linear-gradient(to right, #f1f4ff, #f3f1ff, #e8f0fd);
            border-radius: 12px;
            .button {
                padding: 10px 0;
                margin-top: 20px;
                text-align: center;
                background-color: var(--el-bg-color);
                border-radius: 50px;
                box-shadow: 0 5px 40px 0 rgb(0 0 0 / 15%);
                &:hover {
                    cursor: pointer;
                    opacity: .8;
                }
            }
        }
    }
}

.dark {
    .panel-card-twig,
    .panel-card-link,
    .panel-card-apply .apply-item {
        background: linear-gradient(to right, #3f3f43, #5b5b5e, #585b5f);
    }

    .panel-card-twig  {
        .twig-item,
        .twig-item span {
            color: #5d6167 !important;
        }
    }

    .panel-card-apply {
        .button {
            opacity: 0.7;
        }
    }
}
</style>